<template>
    <div class="row fixed-table-toolbar search_box">
        <div class="input-group" style="width:100%">
            <form _lpchecked="1">
                <div class="rows">
                    <el-form v-if="searchData && schemas"  ref="form" label-width="80px">
                        <div class="form-group col-sm-3"  v-for="schema in schemas">
                            <label>{{schema.name}}</label>
                            <!--{{schema.key]}}-->
                            <lar-form-ceil v-if="schema"
                                           :data ="searchData"
                                           :schema = "schema"
                                           action = "search"
                                           @searchModel="searchData[schema.key]['searchModel'] = $event"
                                           v-model.lazy ="searchData[schema.key]['value']"
                            >
                            </lar-form-ceil>
                        </div>
                    <div class="form-group col-sm-3">
                        <label>&nbsp;</label>
                        <div>
                            <el-button type="danger" round @click="clearSearch()">重 置</el-button>
                        </div>
                    </div>

                    </el-form>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            model:{
                type:String,
            },
            schemas:{
                type:[Object],
            },
            pipeName:{String},
            default:'',
        },
        data(){
            return {
                searchData:[],
                delay:2000,//毫秒,延迟执行
                timeout:null,
            }
        },
        created:function () {
//          this.initData();
            this.searchData = this.$store.getters.getPipe(this.pipeName);
        },
        computed:{
//            pipe() {
//                return this.$store.getters.getPipe(this.pipeName);
//            },
        },
        watch:{
            schemas:function () {
                this.initData();
            },
            model:function(){
                this.initData();
            },
//            pipe(){
//                this.searchData = this.pipe;
//            },


            searchData:{
                handler(newValue){
                    clearTimeout(this.timeout);
                    this.timeout=setTimeout(()=>{
                        this.update(newValue)
                    },500)

                } ,
                deep:true
            }
        },
        methods: {
            update(newValue){
                let data;
                if(newValue)
                   data =JSON.parse(JSON.stringify(newValue));
                else
                    data=[];
                this.$store.commit('pipe',{'value':data,'name':this.pipeName});
                this.$emit('input', data);
            },
            initData() {
                let schemas = {};
                for( var key in this.schemas){
                    let name = this.schemas[key]['key'];
                    schemas[name]={};
                }
                this.searchData = schemas;
                this.loading = false;
            },
            searchModel(value){
                // alert(22)
            },

            clearSearch(){
                for( let key in this.searchData){
                    Vue.delete(this.searchData[key],'value');
                }
            }

            //获取配置

        }
    }
</script>
<style>
    .search_box .el-form-item__label{
        display: none;
    }
    .search_box .form-group{
        margin-bottom: 0;
    }
    .search_box .el-form-item__content{
        margin-left: 0 !important;
    }
    .search_box .help-block{
        display: none;
    }
</style>
<style scoped>

</style>